<template>
    <van-search v-model="searchList" placeholder="请输入搜索关键词" @search="onSearch(name)"/>
    <van-tabs v-model:active="active" @change="onChange">
        <van-tab title="公开" name="public"></van-tab>
        <van-tab title="加密" name="secret"></van-tab>
    </van-tabs>
    <van-button class="add-button" icon="plus" type="primary" @click="doAddTeam"></van-button>

    <team-card-list :team-list="teamList"></team-card-list>

</template>

<script setup lang="ts">
    import {useRouter} from 'vue-router'
    import TeamCardList from '../components/TeamCardList.vue'
    import {onMounted,ref} from "vue";
    import myAxois from "../plugin/MyAxios";
    import {showFailToast, showSuccessToast} from "vant";
    const router = useRouter();



    //创建队伍按钮跳转
    const doAddTeam = () =>{
      router.push({
       path:"/team/add"
      })
    }

    const searchList = ref('')

    const active = ref('public')
    const onChange = (name) =>{
        if(name === "public"){
            ListTeam(searchList.value,0);
        }else{
            ListTeam(searchList.value,2);
        }
    }

    const teamList = ref([]);

    /**
     * 搜索队伍
     * @param val
     * @returns {Promise<void>}
     * @constructor
     */
    const ListTeam = async (val = '',status = 0) =>{
        const res = await myAxois.get("/team/list",{
            params:{
                searchText:val,
                status:status
            }
        });
        if(res.data.code === 0){
            showSuccessToast("success");
            teamList.value = res.data.data;
        }else{
            showFailToast("fail")
        }
    }

    onMounted(async () => {
        ListTeam();
    })


    const onSearch = (val) =>{
        ListTeam(val);
    }

</script>

<style scoped>

</style>